<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		/* latin-ext */
		@font-face {
			font-family: 'Lato';
			font-style: normal;
			font-weight: 700;
			src: url(../font/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
			unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
		}

		/* latin */
		@font-face {
			font-family: 'Lato';
			font-style: normal;
			font-weight: 700;
			src: url(../font/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
			unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
		}

		.text-effect {
			overflow: hidden;
			position: relative;
			-webkit-filter: contrast(110%) brightness(190%);
			filter: contrast(110%) brightness(190%);
		}

		.neon {
			position: relative;
			background: black;
			color: transparent;
		}

		.neon::before,
		.neon::after {
			content: attr(data-text);
			color: white;
			-webkit-filter: blur(0.02em);
			filter: blur(0.02em);
			position: absolute;
			top: 0;
			left: 0;
			pointer-events: none;
		}

		.neon::after {
			mix-blend-mode: difference;
		}

		.gradient,
		.spotlight {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			pointer-events: none;
			z-index: 10;
		}

		.gradient {
			background: -webkit-linear-gradient(45deg, red, blue);
			background: linear-gradient(45deg, red, blue);
			mix-blend-mode: multiply;
		}

		.spotlight {
			-webkit-animation: light 5s infinite linear;
			animation: light 5s infinite linear;
			background: -webkit-radial-gradient(circle, #ffffff, rgba(0, 0, 0, 0) 25%) 0 0/25% 25%, -webkit-radial-gradient(circle, #ffffff, #000000 25%) 50% 50%/12.5% 12.5%;
			background: radial-gradient(circle, #ffffff, rgba(0, 0, 0, 0) 25%) 0 0/25% 25%, radial-gradient(circle, #ffffff, #000000 25%) 50% 50%/12.5% 12.5%;
			top: -100%;
			left: -100%;
			mix-blend-mode: color-dodge;
		}

		@-webkit-keyframes light {
			100% {
				-webkit-transform: translate3d(50%, 50%, 0);
				transform: translate3d(50%, 50%, 0);
			}
		}

		@keyframes light {
			100% {
				-webkit-transform: translate3d(50%, 50%, 0);
				transform: translate3d(50%, 50%, 0);
			}
		}

		.neon {
			font: 700 220px 'Lato', sans-serif;
			text-transform: uppercase;
			text-align: center;
			margin: 0;
		}

		.neon:focus {
			outline: none;
			border: 1px dotted white;
		}

		body {
			background: black;
			min-height: 100vh;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-ms-flex-line-pack: center;
			align-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
		}
	</style>
	<body>
		<div class="text-effect">
			<h1 class="neon" data-text="Neon" contenteditable="">Neon</h1>
			<div class="gradient"></div>
			<div class="spotlight"></div>
		</div>
		<div style="text-align:center;clear:both">
		</div>
		<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
		<script>
			$('[data-text]').on('keyup', function() {
				$(this).attr('data-text', $(this).text());
			});
		</script>
	</body>
</html>
